<template>
    <div class="data-info">
        <dv-capsule-chart :config="config" style="width:100%;height:17vh" />
    </div>

</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      config: {
        data: [],
        showValue: true
      }
    }
  },
  watch: {
    data(val) {
      for (let i = 0; i < val.length; i++) {
        if (this.$route.name === 'data/industry/index') {
          if (i < 5) {
            this.config.data.push({
              name: val[i].title,
              value: val[i].company_num,
              regist_capi: val[i].regist_capi
            })
          }
        }
        if (this.$route.name === 'data/industry/screen') {
          if (i < 9) {
            this.config.data.push({
              name: val[i].title,
              value: val[i].company_num,
              regist_capi: val[i].regist_capi
            })
          }
        }
      }
      this.config = { ...this.config }
    }
  },
}
</script>

<style>
.dv-capsule-chart .label-column {
  font-size: 7px;
}
</style>
